<template>
  <el-dialog v-model="dialogVisible" :title="title" width="50%">
    <label>
      <input type="checkbox" v-model="isAuto" />{{ $t("自适应") }}
    </label>
    <div :class="{ disabled: isAuto }">
      <!-- 上限设置 -->
      <div class="input-control-block">
        <span class="demonstration">{{ $t("上限") }}</span>
        <el-input
          v-model="maxValue"
          size="large"
          readonly
          @click="openKeyboard('max')"
          placeholder="点击输入"
        >
          <template #append>
            <el-button @click="openKeyboard('max')">
              <el-icon><Edit /></el-icon>
            </el-button>
          </template>
        </el-input>
      </div>

      <!-- 下限设置 -->
      <div class="input-control-block">
        <span class="demonstration">{{ $t("下限") }}</span>
        <el-input
          v-model="minValue"
          size="large"
          readonly
          @click="openKeyboard('min')"
          placeholder="点击输入"
        >
          <template #append>
            <el-button @click="openKeyboard('min')">
              <el-icon><Edit /></el-icon>
            </el-button>
          </template>
        </el-input>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ $t("取消") }}</el-button>
        <el-button type="primary" @click="handleConfirm">
          {{ $t("确定") }}
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 数字键盘弹框 -->
  <el-dialog
    v-model="showKeyboard"
    :title="currentInputType === 'max' ? $t('输入上限') : $t('输入下限')"
    width="400px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
  >
    <div class="keyboard-container">
      <div class="keyboard-display">
        <el-input v-model="tempValue" size="large" readonly />
      </div>
      <div class="keyboard-buttons">
        <el-button
          v-for="num in [7, 8, 9]"
          :key="num"
          @click="appendNumber(num)"
          size="large"
          >{{ num }}</el-button
        >

        <el-button
          v-for="num in [4, 5, 6]"
          :key="num"
          @click="appendNumber(num)"
          size="large"
          >{{ num }}</el-button
        >

        <el-button
          v-for="num in [1, 2, 3]"
          :key="num"
          @click="appendNumber(num)"
          size="large"
          >{{ num }}</el-button
        >

        <el-button @click="toggleSign" size="large">+/-</el-button>
        <el-button @click="appendNumber(0)" size="large">0</el-button>
        <el-button @click="appendDot" size="large">.</el-button>

        <el-button @click="clearValue" size="large" type="warning"
          >{{ $t("清除") }}</el-button
        >
        <el-button @click="backspace" size="large" type="info">{{ $t("退格") }}</el-button>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelKeyboard">{{ $t("取消") }}</el-button>
        <el-button type="primary" @click="confirmKeyboard">{{
          $t("确定")
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
  <script setup>
import { ref, getCurrentInstance } from "vue";
import { ElMessageBox } from "element-plus";
import { Edit } from "@element-plus/icons-vue";

const instance = getCurrentInstance();
const $axios = instance.proxy.$axios;
const $message = instance.proxy.$message;
const $t = instance.proxy.$t;

const emits = ["confirm"];

const title = ref("标题");
const dialogVisible = ref(false);
const minValue = ref(0);
const maxValue = ref(100);
const isAuto = ref(false);
const showKeyboard = ref(false);
const currentInputType = ref("");
const tempValue = ref("");

let _yAxis = [];
let _yIdx = -1;

// 打开数字键盘
const openKeyboard = (type) => {
  currentInputType.value = type;
  tempValue.value = String(type === "max" ? maxValue.value : minValue.value);
  showKeyboard.value = true;
};

// 数字键盘功能
const appendNumber = (num) => {
  tempValue.value += String(num);
};

const appendDot = () => {
  if (!tempValue.value.includes(".")) {
    if (tempValue.value === "" || tempValue.value === "-") {
      tempValue.value += "0.";
    } else {
      tempValue.value += ".";
    }
  }
};

const toggleSign = () => {
  if (tempValue.value.startsWith("-")) {
    tempValue.value = tempValue.value.substring(1);
  } else {
    tempValue.value = "-" + tempValue.value;
  }
};

const clearValue = () => {
  tempValue.value = "";
};

const backspace = () => {
  tempValue.value = tempValue.value.slice(0, -1);
};

const cancelKeyboard = () => {
  showKeyboard.value = false;
  tempValue.value = "";
};

const confirmKeyboard = () => {
  const numValue = parseFloat(tempValue.value);
  if (!isNaN(numValue)) {
    if (currentInputType.value === "max") {
      maxValue.value = numValue;
    } else {
      minValue.value = numValue;
    }
    validateValues();
  }
  showKeyboard.value = false;
  tempValue.value = "";
};

// 验证上下限的合理性
const validateValues = () => {
  if (minValue.value >= maxValue.value) {
    if (maxValue.value <= minValue.value) {
      maxValue.value = parseFloat((minValue.value + 0.01).toFixed(2));
    }
  }
};

const handleConfirm = () => {
  if (minValue.value >= maxValue.value) {
    ElMessageBox.alert($t("上限必须大于下限"), $t("警告"), {
      confirmButtonText: $t("确定"),
      type: "warning",
    });
    return;
  }

  if (isAuto.value) {
    _yAxis[_yIdx]["min"] = null;
    _yAxis[_yIdx]["max"] = null;
  } else {
    _yAxis[_yIdx]["min"] = minValue.value;
    _yAxis[_yIdx]["max"] = maxValue.value;
  }

  _yAxis[_yIdx]["_auto"] = isAuto.value;
  instance.emit("confirm", _yAxis);
  dialogVisible.value = false;
};

const showDialog = (yAxis, yAxisIndex) => {
  _yAxis = yAxis;
  _yIdx = yAxisIndex;
  title.value = yAxis[yAxisIndex]["unit"];

  minValue.value =
    yAxis[yAxisIndex]["min"] ?? yAxis[yAxisIndex]["_min"] ?? -1000;
  maxValue.value =
    yAxis[yAxisIndex]["max"] ?? yAxis[yAxisIndex]["_max"] ?? 1000;
  isAuto.value = yAxis[yAxisIndex]["_auto"] ?? false;

  dialogVisible.value = true;
};

defineExpose({
  showDialog,
});
</script>
  
  <style scoped>
.input-control-block {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}

.input-control-block .demonstration {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  width: 80px;
  margin-right: 20px;
}

.input-control-block .el-input {
  flex: 1;
  cursor: pointer;
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* 数字键盘样式 */
.keyboard-container {
  padding: 10px;
}

.keyboard-display {
  margin-bottom: 20px;
}

.keyboard-display .el-input {
  width: 100%;
}

.keyboard-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.keyboard-buttons .el-button {
  width: 100%;
  height: 60px;
  font-size: 20px;
  margin: 0;
}

/* 清除和退格按钮占据整行 */
.keyboard-buttons .el-button:nth-last-child(2) {
  grid-column: 1 / 3;
}

.keyboard-buttons .el-button:nth-last-child(1) {
  grid-column: 3 / 4;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .input-control-block {
    flex-direction: column;
    align-items: flex-start;
  }

  .input-control-block .demonstration {
    margin-bottom: 10px;
  }

  .input-control-block .el-input {
    width: 100%;
  }
}
</style>
  